<script lang="ts" setup>
import { computed } from "vue";

interface ButtonProps {
  type?: "default" | "primary" | "text" | "danger";
  outline?: boolean;
  shape?: "round" | "circle" | "square";
  customStyles?: any;
  full?: boolean;
  size?: "mini" | "small" | "middle" | "normal" | "large";
}

const props = withDefaults(defineProps<ButtonProps>(), {
  type: "default",
  outline: false,
  full: false,
  size: "normal",
});

const buttonSize = computed(() => {
  switch (props.size) {
    case "mini":
      return "umrp-button-mini";
    case "small":
      return "umrp-button-small";
    case "middle":
      return "umrp-button-middle";
    case "large":
      return "umrp-button-large";
    default:
      return "umrp-button-normal";
  }
});

const buttonType = computed(() => {
  switch (props.type) {
    case "primary":
      return "umrp-button-primary";
    case "default":
      return "umrp-button-default";
    case "danger":
      return "umrp-button-danger";
    case "text":
      return "umrp-button-text";
    default:
      return "";
  }
});

const buttonOutline = computed(() => {
  return props.outline ? "umrp-button-outline" : "";
});

const buttonShape = computed(() => {
  switch (props.shape) {
    case "round":
      return "umrp-button-round";
    case "circle":
      return "umrp-button-circle";
    case "square":
      return "umrp-button-square";
    default:
      return "";
  }
});

const buttonFull = computed(() => {
  if (props.full) {
    return "umrp-button-full";
  }
  return "";
});
</script>

<template>
  <button class="umrp-button" :class="[buttonType, buttonOutline, buttonShape, buttonFull, buttonSize]" :style="customStyles">
    <span v-if="$slots.prefix" class="umrp-button-prefix">
      <slot name="prefix"></slot>
    </span>
    <slot></slot>
    <span v-if="$slots.suffix" class="umrp-button-suffix">
      <slot name="suffix"></slot>
    </span>
  </button>
</template>

<style lang="scss" scoped>
.umrp-button {
  cursor: pointer;
  border: none;
  border-radius: 4px;
  color: #333;
  box-sizing: border-box;

  &-normal {
    padding: 4px 10px;
  }

  &-mini {
    padding: 4px 6px;
    font-size: 12px;
    line-height: 12px;
  }

  &-small {
    padding: 4px 8px;
  }

  &-full {
    width: 100%;
  }

  &-default {
    border: 1px solid #f0f0f0;
    background: none;
  }

  &-primary {
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
    color: white;
  }

  &-danger {
    border: 1px solid red;
    background: red;
    color: white;
  }

  &-outline {
    color: var(--primary-color);
    background: none;
    border: 1px solid var(--primary-color);
  }

  &-text {
    color: var(--primary-color);
    background: none;
  }

  &-round {
    border-radius: 20px;
  }

  &-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 100px;
  }

  &-square {
    border-radius: 4px;
  }
}
</style>
